<template>
  <div>
    <div>
      <page-title title="待审核订单/处理" home-path="/center/home"></page-title>
    </div>
    <div class="pageMain">
      <div class="pageMain-title">
        <span>技术评审</span>
      </div>
      <div class="pageMain-body">
        <div class="container">
          <div class="left-half">
            <order-detail :form-data="formData"></order-detail>
          </div>
          <div class="vertical-line"></div>
          <div class="right-half">
            <div class="majorCategories">
              <div style="display: flex">
                <h3>技术评审人员意见</h3>
                <el-button type="warning" size="mini" style="margin-left: 10px" @click="editOpinion">{{ butState }}</el-button>
              </div>
              <el-table :data="tableData" border>
                <el-table-column label="评审部门" prop="department" width="200">
                  <template slot-scope="scope">
                    <span v-if="!isEditing">{{ scope.row.department }}</span>
                    <el-input
                      v-else
                      v-model="scope.row.department"
                      size="small"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="评审人" prop="assessor" width="200">
                  <template slot-scope="scope">
                    <span v-if="!isEditing">{{ scope.row.assessor }}</span>
                    <el-input
                      v-else
                      v-model="scope.row.assessor"
                      size="small"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="评审意见" prop="comment">
                  <template slot-scope="scope">
                    <span v-if="!isEditing">{{ scope.row.comment }}</span>
                    <el-input
                      v-else
                      v-model="scope.row.comment"
                      size="small"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
              <table class="uTable" style="margin-top: 10px">
                <tbody>
                  <tr>
                    <td><span>是否引起成本变化</span></td>
                    <td>
                      <span v-if="!isEditing">{{
                        finalForm.isCostByChange==0?'否':'是'
                      }}</span>
                      <el-select
                        v-else
                        v-model="finalForm.isCostByChange"
                        size="mini"
                      >
                        <el-option
                          v-for="item in judgeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td><span>首试制</span></td>
                    <td>
                      <span v-if="!isEditing">{{
                        finalForm.isMake==0?'否':'是'
                      }}</span>
                      <el-select
                        v-else
                        v-model="finalForm.isMake"
                        size="mini"
                      >
                        <el-option
                          v-for="item in judgeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td><span>风险评估等级</span></td>
                    <td>
                      <span v-if="!isEditing">{{ finalForm.assess==0?'高':finalForm.assess==1?'中':'低' }}</span>
                      <el-select v-else v-model="finalForm.assess" size="mini">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td><span>外委情况</span></td>
                    <td>
                      <span v-if="!isEditing">{{ finalForm.outsourcingStatus == 0 ? "无需外委" : "需要外委" }}</span>
                      <el-select
                        v-else
                        v-model="finalForm.outsource"
                        size="mini"
                      >
                        <el-option
                          v-for="item in judgeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div>
                <span>成本预测：</span>
                <el-button type="text" size="medium">测算详情</el-button>
              </div>
              <div>
                <div>
                  <span>评审结论：</span>
                  <span>
                    {{ finalForm.receivingState ? finalForm.receivingState == 0 ? "不接单" : finalForm.receivingState == 1 ? "接单" : finalForm.receivingState == 2 ? "带条件生产" : "" : "" }}
                  </span>
                </div>
                <div v-if="finalForm.receivingState && finalForm.receivingState==2">
                  <span>评审备注：</span>
                  <span>{{ finalForm.receivingRemark }}</span>
                </div>
              </div>
            </div>

            <div class="majorCategories">
              <div class="flex">
                <h3>主任综合意见</h3>
                <el-button type="warning" size="mini" style="margin-left: 10px" @click="editForm">{{ directorStatus }}</el-button>
              </div>
              <div class="flex">
                <div>总工办/技术中心主任/副主任意见</div>
                <el-select
                  v-if="directorStatus == '保存'"
                  v-model="finalForm.isConsent"
                  placeholder="请选择"
                  style="width: 10vh;margin-left: 20px;"
                >
                  <el-option
                    v-for="item in judgeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-model="finalForm.directorText"
                  :disabled="disabled"
                  style="width:10vh;margin-left: 10px;"
                ></el-input>
              </div>
            </div>

            <div class="majorCategories">
              <h2>最终意见</h2>
              <el-form :model="finalFormMatter" :rules="formRules">
                <el-form-item
                  label="是否可以订货"
                  prop="isOrder"
                  style="margin-left: 40px"
                >
                  <el-radio-group v-model="finalFormMatter.isOrderGood">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="新产品/常规产品"
                  prop="productType"
                  style="margin-left: 40px"
                >
                  <el-radio-group v-model="finalFormMatter.productType">
                    <el-radio :label="0">常规产品</el-radio>
                    <el-radio :label="1">新产品</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="是否签订技术条件"
                  prop="isSigningTechnicalConditions"
                  style="margin-left: 40px"
                >
                  <el-radio-group
                    v-model="finalFormMatter.isConclude"
                  >
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="合同需要标注的内容"
                  prop="annotatedContent"
                  style="margin-left: 40px"
                  label-position="top"
                >
                  <el-button type="warning" size="mini" @click="handleCopy">复制特殊要求</el-button
                  >
                  <el-input
                    v-model="finalFormMatter.annotatedContent"
                    :autosize="{ minRows: 3, maxRows: 10 }"
                    resize="none"
                    placeholder="请输入内容"
                    clearable
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>

            <div style="float: right">
              <el-button type="success" size="mini" @click="jumpComplete">通过</el-button>
              <el-button type="danger" size="mini" @click="rejectComplete">不通过,推送至OA审批</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderDetail from "@/components/OrderDetail.vue";
import PageTitle from "@/components/PageTitle.vue";
import { post } from "@/lib/Util.js";
import {
  getDirectorOpinion,
  editorsOpinion,
  getReviewedLeftList,
  finalSubmitData,
  finalRejectData,
  getReviewerOpinion,
  opinionsOfEditorialTechnicians
} from "@/lib/Api.js";
export default {
  components: { OrderDetail, PageTitle },
  data() {
    return {
      formData: {},
      formId: "",
      disabled: true,
      butState: "编辑",
      directorStatus: "编辑",
      isEditing: false,
      finalFormMatter: {},
      judgeOptions: [{ value: 1, label: "是" }, { value: 0, label: "否" }],
      options: [{ value: 1, label: "是" }, { value: 0, label: "否" }],
      finalForm: {},
      formRules: {
        isOrder: [{ required: true, message: "请选择", trigger: "blur" }],
        productType: [{ required: true, message: "请选择", trigger: "blur" }],
        isSigningTechnicalConditions: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        annotatedContent: [
          { required: true, message: "请输入内容", trigger: "blur" }
        ],
        directorText: [
          { required: true, message: "请输入内容", trigger: "blur" }
        ]
      },
      rules: {
        judge: [{ required: true, message: "请选择", trigger: "blur" }],
        opinion: [{ required: true, message: "请填写意见", trigger: "blur" }]
      },
      tableData: [],
      fromPath: ""
    };
  },
  computed: {
    // 通过 Vuex getter 获取共享参数
    sharedId() {
      return this.$store.getters.getSharedId;
    }
  },
  created() {
    this.options = this.$enumeration.gradeOptions;
    this.judgeOptions = this.$enumeration.judgeOption;
  },
  mounted() {
    this.getDirectorsOpinion();
    this.getTableData();
    this.getReviewersOpinion();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log(from, "from");
      vm.fromPath = from.path;
    });
  },
  methods: {
    //获取左侧表格数据
    getTableData() {
      post(getReviewedLeftList, { contractInfoId: this.sharedId }).then(res => {
        if (res.code == 200) {
          this.formData = res.data;
        }
      });
    },
    //编辑表格
    editOpinion() {
      this.butState = this.butState === "编辑" ? "保存" : "编辑";
      this.isEditing = !this.isEditing;
      this.saveTableData();
    },
    //保存评审人员信息
    saveTableData() {
      if (this.butState === "编辑") {
        // this.saveOpinions();
        this.saveReview();
      }
    },
    saveReview() {
      let data = {
        assess: this.finalForm.assess,
        id: this.sharedId,
        isMake: this.finalForm.isMake,
        outsourcingStatus: this.finalForm.outsourcingStatus,
        receivingRemark: this.finalForm.receivingRemark,
        receivingState: this.finalForm.receivingState,
        reviewCommentId: this.finalForm.reviewCommentId,
        isCostByChange: this.finalForm.isCostByChange, // 是否引起成本变化
        reviewInfoDtoList: this.tableData
      };
      post(opinionsOfEditorialTechnicians, data).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功！");
        }
      });
    },
    editForm() {
      this.directorStatus = this.directorStatus === "编辑" ? "保存" : "编辑";
      this.save();
    },
    save() {
      if (this.directorStatus === "编辑") {
        this.disabled = true;
        this.saveOpinions();
      } else {
        this.disabled = false;
      }
    },
    //编辑主任意见
    saveOpinions() {
      let data = {
        id: this.sharedId,
        isConsent: this.finalForm.opinion,
        remark: this.finalForm.directorText
      };
      post(editorsOpinion, data).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功!");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //最终审核通过
    jumpComplete() {
      let data = Object.assign(this.finalFormMatter, {
        contractInfoId: this.sharedId,
        isConsent: this.finalForm.isConsent
      });
      post(finalSubmitData, data).then(res => {
        if (res.code == 200) {
          this.$message.success("提交成功！");
          this.$router.push({
            path: this.fromPath
          });
        }
      });
    },
    //最终审核不通过
    rejectComplete() {
      let data = Object.assign(this.finalFormMatter, {
        contractInfoId: this.sharedId,
        isConsent: this.finalForm.isConsent
      });
      post(finalRejectData, data).then(res => {
        if (res.code == 200) {
          this.$message.warning("推送至OA审批！");
          this.$router.push({
            path: this.fromPath
          });
        }
      });
    },
    //获取评审人员意见
    getReviewersOpinion() {
      post(getReviewerOpinion, { id: this.sharedId }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.reviewInfoDtoList;
          this.finalForm = res.data;
        }
      });
    },
    //获取主任意见信息
    getDirectorsOpinion() {
      let data = {
        id: this.sharedId
      };
      post(getDirectorOpinion, data).then(res => {
        if (res.code == 200) {
          this.finalForm.directorText = res.data.remark;
        }
      });
    },
    // 复制特殊要求
    handleCopy() {
      this.$message({
        message: "复制成功",
        type: "success"
      });
      if (this.formData?.specialRequirements) {
        this.finalFormMatter.annotatedContent = this.formData.specialRequirements;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.vertical-line {
  width: 2px;
  height: calc(100vh - 90px);
  background-color: #ccc;
  margin: 0 10px;
}
.container {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.left-half,
.right-half {
  flex: 1;
  padding: 10px;
  width: 50%;
  margin: 0px 30px;
}
.majorCategories {
  margin-bottom: 30px;
  div {
    margin-top: 10px;
  }
}
</style>
